import LTable from "@/components/public/lTable/lTable";
import { defineComponent, ref, reactive, computed } from "vue";
import useNavigator from "@/hooks/useNavigator";
import { CircleStateTitle } from "@/components/public/dotStateTitle/dotStateTitle";
import $roleUserChooseUserService from "@/modules/permission/roleUserChooseUser.service";
import styles from "./chooseUser.module.less";
export default defineComponent({
  emits: ['cancel', 'confirm'],
  setup(props, { emit }) {
    const navigator = useNavigator();
    const state = reactive({
      toolbar: {
        left: [
          "refresh",
        ],
        right: ["filter", "search"],
      },
      dataSource: [],
      columns: [
        {
          title: "工号",
          dataIndex: "work_userid",
          align: "center",
          width: "80px",
        },
        {
          title: "用户名称",
          dataIndex: "username",
          align: "center",
          width: "150px",
        },
        {
          title: "手机",
          dataIndex: "phone",
          align: "center",
          width: "150px",
        }, 
        {
          title: "状态",
          dataIndex: "status",
          align: "center",
          width: "120px",
        },
      ],
      loading: false,
      query: {
        not_in_role_id: navigator.route?.query?.role_id || '',
      },
      searchForm: {
        work_userid: {
          type: "input",
          label: "工号",
          attrs: { placeholder: "工号" },
        },
        name: {
          type: "input",
          label: "用户名称",
          attrs: { placeholder: "用户名称" },
        },
        phone: {
          type: "input",
          label: "手机号码",
          attrs: { placeholder: "手机号码" },
        },
      },
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
      selectedRowKeys: [],
    } as any);
    // 表格状态变更
    const tableChangeHandler = (pag: { pageSize: number; current: number }) => {
      state.pagination.current = pag.current;
      state.pagination.pageSize = pag.pageSize;
    };
    // 选中项变更
    const onSelectChange = (record: any) => {
      let id = record.id;
      state.selectedRowKeys.includes(id) ? state.selectedRowKeys.splice(state.selectedRowKeys.findIndex((x: any) => x.id === id)) : state.selectedRowKeys.push(id);
    };
    const rowSelection = computed(() => {
      return {
        selectedRowKeys: state.selectedRowKeys,
        fixed: true,
        onSelect: onSelectChange,
      };
    });
    const $service = new $roleUserChooseUserService();
    const LTableRef = ref(null as any);
    return () => (
      <div style={{ width: "100%", padding: "15px" }}>
        <LTable
          ref={LTableRef}
          service={$service}
          toolbar={state.toolbar}
          v-model={state}
        >
          <a-table
            bordered={true}
            scroll={{ x: "max-content" }}
            dataSource={state.dataSource}
            columns={state.columns}
            pagination={state.pagination}
            onChange={tableChangeHandler}
            row-selection={rowSelection.value}
            loading={state.loading}
            rowKey="id"
            v-slots={{
              bodyCell: ({ column, record }: any) => {
                if (column.dataIndex === "status") {
                  return (
                    Number(record.status) ? <CircleStateTitle title="正常" type="success" /> : <CircleStateTitle title="停用" type="danger" />
                  )
                }
              },
            }}
          />
        </LTable>
        <div class={styles.btns}>
          <a-button onClick={() => { emit('cancel') }}>取消</a-button>
          <a-button type="primary" onClick={() => { emit('confirm', state.selectedRowKeys) }}>确定</a-button>
        </div>
      </div>
    )
  },
})